import React from 'react';
import I18n from 'i18n-js';
import useStorage from '../services/asyncStorage';

I18n.defaultLocale = 'zh';
I18n.fallbacks = true;

//current locale
I18n.locale = 'zh';

I18n.translations = {
  en: require('./languages/en.json'),
  zh: require('./languages/zh.json'),
};
const LocaleContext = React.createContext();

const missingTranslationRegex = /^\[missing ".*" translation\]$/;
// This function is a wrapper to avoid exception wich leads in a crash
const translateOrFallback = (initialMsg, options) => {
  // We tried to translate something else than a string
  // The native I18n function will simply crash instead of rejecting the attempt with an error message
  if (typeof initialMsg !== 'string') {
    __DEV__ &&
      console.log(
        `I18n: you must give a string to translate instead of "${typeof initialMsg}"`,
      );

    return ''; // We don't return any message as we don't know what to send
  }

  const localMsg = I18n.t(initialMsg, options);

  // The translation does not exist, the default message is not very sexy
  // Instead we return the message we tried to translate
  if (missingTranslationRegex.test(localMsg)) {
    __DEV__ &&
      console.log(
        `translation "${initialMsg}" does not exists in translations files`,
      );

    return initialMsg;
  }
  return localMsg;
};

export const LocaleContextProvider = (props) => {
  const [locale, changeLocale] = useStorage('@language', 'zh');

  const _changeLocale = (newlocale) => {
    I18n.locale = newlocale;
    changeLocale(newlocale);
  };

  return (
    <LocaleContext.Provider
      value={{
        locale,
        t: translateOrFallback,
        changeLocale: _changeLocale,
      }}
    >
      {props.children}
    </LocaleContext.Provider>
  );
};

export default LocaleContext;
